<template>
  <div class="page page-upload">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <strong>上传文档</strong>
          </div>
          <el-row :gutter="40">
            <el-col :span="14" class="part-left">
              <el-form
                ref="form"
                :model="document"
                label-position="top"
                label-width="80px"
              >
                <el-form-item
                  label="文档分类"
                  prop="category_id"
                  :rules="[
                    {
                      required: true,
                      trigger: 'blur',
                      message: '请选择文档分类',
                    },
                  ]"
                >
                  <el-cascader
                    v-model="document.category_id"
                    :options="categoryTrees"
                    :filterable="true"
                    :disabled="loading"
                    :props="{
                      checkStrictly: true,
                      expandTrigger: 'hover',
                      label: 'title',
                      value: 'id',
                    }"
                    placeholder="请选择文档分类"
                  ></el-cascader>
                </el-form-item>
                <el-form-item
                  :label="`默认售价（${
                    settings.system.credit_name || '魔豆'
                  }）`"
                  prop="price"
                >
                  <el-input-number
                    v-model="document.price"
                    :min="0"
                    :step="1"
                    :disabled="loading"
                  ></el-input-number>
                </el-form-item>
                <el-form-item>
                  <el-upload
                    ref="upload"
                    drag
                    multiple
                    :action="'/api/v1/upload/document'"
                    :headers="{ authorization: `bearer ${token}` }"
                    :show-file-list="false"
                    :disabled="loading || !canIUploadDocument"
                    :auto-upload="false"
                    :on-change="onChange"
                    :file-list="fileList"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                  </el-upload>
                  <el-table
                    v-if="fileList.length > 0"
                    :data="fileList"
                    style="width: 100%"
                    max-height="480"
                  >
                    <el-table-column prop="title" label="#" width="50">
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="文件" min-width="180">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.title" :disabled="loading">
                          <template slot="append">{{
                            scope.row.ext
                          }}</template></el-input
                        >
                        <div v-if="scope.row.error">
                          <el-progress
                            :key="scope.row.name"
                            :percentage="scope.row.percentage"
                            status="exception"
                          ></el-progress>
                          <small class="el-link el-link--danger error-tips">{{
                            scope.row.error
                          }}</small>
                        </div>
                        <el-progress
                          v-else-if="scope.row.percentage > 0"
                          :percentage="scope.row.percentage"
                        ></el-progress>
                      </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" width="100">
                      <template slot-scope="scope">
                        {{ formatBytes(scope.row.size) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      :label="`售价(${settings.system.credit_name || '魔豆'})`"
                      width="130"
                    >
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.price"
                          :min="0"
                          :step="1"
                          :disabled="loading"
                          controls-position="right"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" fixed="right">
                      <template slot="header">
                        操作 (<el-button
                          type="text"
                          size="mini"
                          :disabled="loading"
                          @click="clearAllFiles"
                          >清空</el-button
                        >)
                      </template>
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-delete"
                          :disabled="loading"
                          @click="handleRemove(scope.$index)"
                        >
                          移除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item style="margin-bottom: 0">
                  <el-button
                    v-if="canIUploadDocument"
                    type="primary"
                    class="btn-block"
                    :loading="loading"
                    @click="onSubmit"
                  >
                    <span v-if="loading">请勿刷新页面，文档上传中...</span>
                    <span v-else>确定上传</span>
                  </el-button>
                  <el-button
                    v-else
                    type="primary"
                    icon="el-icon-hot-water"
                    class="btn-block"
                    disabled
                  >
                    <span v-if="user.id > 0">您所在用户组暂无权限上传文档</span>
                    <span v-else>您未登录，请先登录</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10" class="upload-tips part-right">
              <div><strong>温馨提示</strong></div>
              <div class="help-block">
                <ul>
                  <li>
                    1. 带有
                    <span class="el-link el-link--danger">*</span> 为必填项。
                  </li>
                  <li>
                    <!-- 应该从管理后台的配置中查询 -->
                    2. 允许上传的最大单个文档大小为：<span
                      class="el-link el-link--primary"
                      >{{
                        settings.security.max_document_size.toFixed(2) ||
                        '50.00'
                      }}
                      MB</span
                    >
                    。
                  </li>
                  <li>3. 支持批量上传</li>
                  <!-- <li>
                    4.
                    <span class="el-link el-link--danger">同名覆盖</span>
                    表示相同名称的文档（含扩展名），直接用新文档文件替换，以达到更新文档文件的目的。
                  </li> -->
                  <li>
                    4. 目前支持的文档类型：
                    <div v-if="wordExt.length > 0">
                      <img src="/static/images/word_24.png" alt="Word文档" />
                      {{ wordExt.join('，') }}
                    </div>
                    <div v-if="pptExt.length > 0">
                      <img src="/static/images/ppt_24.png" alt="PPT文档" />
                      {{ pptExt.join('，') }}
                    </div>
                    <div v-if="excelExt.length > 0">
                      <img src="/static/images/excel_24.png" alt="Excel文档" />
                      {{ excelExt.join('，') }}
                    </div>
                    <div v-if="otherExt.length > 0">
                      <img src="/static/images/other_24.png" alt="其他文档" />
                      {{ otherExt.join('，') }}
                    </div>
                    <div v-if="allowExt.includes('.txt')">
                      <img src="/static/images/text_24.png" alt="TXT文档" />
                      .txt
                    </div>
                    <div v-if="allowExt.includes('.pdf')">
                      <img src="/static/images/pdf_24.png" alt="PDF文档" />
                      .pdf
                    </div>
                  </li>
                  <li>
                    5. 上传遇到问题需要帮助？请查看
                    <nuxt-link
                      to="/article/help"
                      class="el-link el-link--primary"
                      >文库帮助</nuxt-link
                    >
                    和
                    <nuxt-link
                      to="/article/feedback"
                      class="el-link el-link--primary"
                      >意见反馈</nuxt-link
                    >
                  </li>
                  <li>
                    6. 为营造绿色网络环境，严禁上传含有淫秽色情及低俗信息等文档
                  </li>
                  <li>
                    7.
                    对于涉嫌侵权和违法违规的文档，本站有权在不提前通知的情况下对文档进行删除，您在本站上传文档，表示认同该条款
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { formatBytes } from '~/utils/utils'
import { createDocument } from '~/api/document'
import { canIUploadDocument } from '~/api/user'
import { uploadDocument } from '~/api/attachment'
export default {
  data() {
    return {
      canIUploadDocument: false,
      document: {
        category_id: [],
        price: 0,
        overwrite: false,
      },
      maxDocumentSize: 50 * 1024 * 1024,
      fileList: [],
      filesMap: {},
      loading: false,
      percentAge: 0,
      allowExt: [
        '.doc',
        '.docx',
        '.rtf',
        '.wps',
        '.odt',
        '.dot',
        '.ppt',
        '.pptx',
        '.pps',
        '.ppsx',
        '.dps',
        '.odp',
        '.pot',
        '.xls',
        '.xlsx',
        '.csv',
        '.tsv',
        '.et',
        '.ods',
        '.epub',
        '.umd',
        '.chm',
        '.mobi',
        '.txt',
        '.pdf',
      ],
      wordExtEnum: ['.doc', '.docx', '.rtf', '.wps', '.odt', '.dot'],
      pptExtEnum: ['.ppt', '.pptx', '.pps', '.ppsx', '.dps', '.odp', '.pot'],
      excelExtEnum: ['.xls', '.xlsx', '.csv', '.tsv', '.et', '.ods'],
      otherExtEnum: ['.epub', '.umd', '.chm', '.mobi'],
      wordExt: [],
      pptExt: [],
      excelExt: [],
      otherExt: [],
      totalFiles: 0, // 总个数
      totalFailed: 0, // 失败个数
      totalSuccess: 0, // 成功个数
      totalDone: 0, // 完成个数
    }
  },
  head() {
    return {
      title: '上传文档 - ' + this.settings.system.title || 'MOREDOC · 魔豆文库',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: `上传文档,${this.settings.system.sitename},${this.settings.system.keywords}`,
        },
        {
          hid: 'description',
          name: 'description',
          content: this.settings.system.description,
        },
      ],
    }
  },
  computed: {
    ...mapGetters('user', ['token', 'user']),
    ...mapGetters('category', ['categoryTrees']),
    ...mapGetters('setting', ['settings']),
  },
  async created() {
    const res = await canIUploadDocument()
    if (res.status === 200) {
      this.canIUploadDocument = true
    }
    try {
      this.maxDocumentSize =
        (this.settings.security.max_document_size || 50) * 1024 * 1024
    } catch (error) {
      console.log(error)
    }

    try {
      this.allowExt =
        this.settings.security.document_allowed_ext || this.allowExt
    } catch (error) {
      console.log(error)
    }
    this.allowExt.map((ext) => {
      if (this.wordExtEnum.includes(ext)) {
        this.wordExt.push(ext)
      } else if (this.pptExtEnum.includes(ext)) {
        this.pptExt.push(ext)
      } else if (this.excelExtEnum.includes(ext)) {
        this.excelExt.push(ext)
      } else if (this.otherExtEnum.includes(ext)) {
        this.otherExt.push(ext)
      }
    })
  },
  methods: {
    formatBytes,
    ...mapActions('user', ['getUser']),
    onChange(file) {
      const name = file.name.toLowerCase()
      const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
      if (!this.allowExt.includes(ext)) {
        this.$message.warning(`${file.name} 不支持的文件格式，忽略该文件`)
        return
      }

      if (file.size > this.maxDocumentSize) {
        this.$message.warning(
          `${file.name} 文件大小${formatBytes(
            file.size
          )} 超过限制（最大${formatBytes(this.maxDocumentSize)}），忽略该文件`
        )
        return
      }

      // 文件不能大于指定的文件大小
      if (
        !this.filesMap[name] &&
        this.allowExt.includes(ext) &&
        file.size <= this.maxDocumentSize
      ) {
        const item = {
          ...file,
          title: file.name.substring(0, file.name.lastIndexOf('.')),
          ext,
          price: this.document.price || 0,
          progressStatus: 'success',
          error: '',
          percentage: 0,
          attachment_id: 0,
        }
        this.filesMap[name] = item
        this.fileList.push(item)
        this.totalFiles = this.fileList.length
      }
    },
    handleRemove(index) {
      this.filesMap[this.fileList[index].name] = null
      this.fileList.splice(index, 1)
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 1. 验证文件是否存在
          if (this.fileList.length === 0) {
            this.$message.error('请先选择要上传的文档')
            return
          }

          this.totalFiles = this.fileList.length
          this.totalDone = 0
          this.loading = true
          try {
            // 取消之前上传的请求，不然一直pending，新请求会没法发送
            window.uploadDocumentCancel.map((c) => c())
            window.uploadDocumentCancel = []
          } catch (error) {}

          // chrome 等浏览器同一域名下最多只能同时发起 6 个请求，所以这里将 fileList 拆分成多个数组，每个数组的长度为 2，以便控制并发，每次只同时上传 2 个文件
          const fileList = this.fileList.reduce((prev, cur, index) => {
            const i = Math.floor(index / 2)
            prev[i] = prev[i] || []
            prev[i].push(cur)
            return prev
          }, [])
          fileList.reduce(async (prev, cur) => {
            await prev
            await Promise.all(
              cur.map(async (file) => {
                await this.uploadDocument(file)
              })
            )
          }, Promise.resolve())
        }
      })
    },
    clearAllFiles() {
      if (this.loading) {
        return
      }
      this.fileList = []
      this.filesMap = {}
      this.$refs.upload.clearFiles()
    },
    async uploadDocument(file) {
      if (file.percentage === 100 && file.attachment_id) {
        // 不用再次上传
        this.createDocument(file)
        this.totalDone++
        return
      }
      file.error = ''
      file.progressStatus = 'success'

      const formData = new FormData()
      formData.append('file', file.raw)

      try {
        const res = await uploadDocument(formData, {
          onUploadProgress: (progressEvent) => {
            file.percentage = parseInt(
              (progressEvent.loaded / progressEvent.total) * 100
            )
          },
          // timeout: 1000 * 6,
        })
        if (res.status === 200) {
          file.attachment_id = res.data.data.id || 0
          this.createDocument(file)
          this.totalSuccess++
        } else {
          file.progressStatus = 'exception'
          file.error = res.data.message || res.statusText
          this.$message.error(`《${file.name}》${file.error}`)
          this.totalFailed++
        }
      } catch (error) {
        file.progressStatus = 'exception'
        file.error = '上传失败或超时，请重试'
        this.$message.error(`《${file.name}》${file.error}`)
        this.totalFailed++
      }

      this.totalDone++
      if (this.totalDone === this.totalFiles) {
        this.loading = false
      }
    },
    async createDocument(doc) {
      const createDocumentRequest = {
        overwrite: this.document.overwrite,
        category_id: this.document.category_id,
        document: [
          {
            title: doc.title,
            price: doc.price,
            attachment_id: doc.attachment_id,
          },
        ],
      }
      const res = await createDocument(createDocumentRequest)
      if (res.status === 200) {
        // 从 fileList 中剔除 attachment_id 与当前文档相同的文档
        this.$message.success(`《${doc.title}》上传成功`)
        this.fileList = this.fileList.filter((item) => {
          return item.attachment_id !== doc.attachment_id && doc.attachment_id
        })

        // 过滤 filesMap 中的文档
        this.filesMap = Object.keys(this.filesMap).reduce((acc, key) => {
          if (this.filesMap[key].attachment_id !== doc.attachment_id) {
            acc[key] = this.filesMap[key]
          }
          return acc
        }, {})
      } else {
        this.$message.error(`《${doc.title}》上传失败 ` + res.data.message)
      }
    },
  },
}
</script>
<style lang="scss">
.page-upload {
  .el-table {
    .el-input-number {
      width: 120px;
    }
  }
  .el-progress {
    position: absolute;
    width: 100%;
    bottom: -1px;
  }
  .error-tips {
    font-size: 12px;
  }
  .upload-tips {
    line-height: 180%;
    border-left: 1px dashed rgb(252, 155, 91);
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      margin-bottom: 10px;
    }
    .el-link {
      top: -2px;
    }
    img {
      position: relative;
      top: 7px;
    }
  }
}
@media screen and (max-width: $mobile-width) {
  .page-upload {
    .part-left {
      width: 100% !important;
      .el-upload {
        display: block;
        .el-upload-dragger {
          width: 100% !important;
        }
      }
    }
    .part-right {
      width: 100% !important;
      margin-top: 20px;
      li {
        margin-bottom: 0;
      }
    }
  }
}
</style>
